import React, { useState, useCallback } from 'react'
import { Cell, Input, Button, Checkbox, Toast } from 'zarm';
import cx from 'classnames';
import { post } from '@/utils';
import CustomIcon from '@/components/CustomIcon';
import Captcha from 'react-captcha-code';
import s from "./style.module.less";
import { useHistory } from 'react-router-dom';
import Crypto from "@/utils/crypto";
const Login = () => {
    const [type, setType] = useState('login');
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [verify, setVerify] = useState('');
    const [captcha, setCaptcha] = useState('');
    const [checked, setChecked] = useState(false)
    const history = useHistory()
    const handleChange = useCallback(
        (captcha) => {
            setCaptcha(captcha)
        },
        [],
    )
    const onChange = e => {
        setChecked(e.target.checked)
    }
    const onsubmit = async () => {
        if (!username) {
            Toast.show('请输入账号')
            return
        }
        if (!password) {
            Toast.show('请输入密码')
            return
        }
        try {
            if (type === 'login') {
                const { data } = await post('/api/user/login', {
                    username,
                    password
                });
                localStorage.setItem('token', data.token);
                history.push('/')
            } else {
                if (!verify) {
                    Toast.show('请输入验证码')
                    return
                }
                if (verify != captcha) {
                    Toast.show('验证码错误')
                    return
                }
                const { data } = await post('/api/user/register', {
                    username,
                    password
                })
                Toast.show('注册成功');
                setType('login')
            }
        } catch (error) {
            Toast.show(error.msg)
        }
    }
    return (
        <div className={s.auth}>
            <div className={s.head} />
            <div className={s.tab}>
                <span className={cx({ [s.active]: type == 'login' })} onClick={() => setType('login')}>登录</span>
                <span className={cx({ [s.active]: type == 'register' })} onClick={() => setType('register')}>注册</span>
            </div>
            <div className={s.form}>
                <Cell icon={<CustomIcon type="zhanghao" />}>
                    <Input
                        clearable
                        type="text"
                        placeholder="请输入账号"
                        onChange={value => setUsername(value)}
                    />
                </Cell>
                <Cell icon={<CustomIcon type="mima" />}>
                    <Input
                        clearable
                        type="password"
                        placeholder="请输入密码"
                        onChange={value => setPassword(Crypto.encrypt(value))}
                    />
                </Cell>
                {
                    type === 'register' ?
                        <Cell icon={<CustomIcon type="mima" />}>
                            <Input
                                clearable
                                type="text"
                                placeholder="请输入验证码"
                                onChange={(value) => setVerify(value)}
                            />
                            <Captcha charNum={4} onChange={handleChange} />
                        </Cell> : null
                }
            </div>
            <div className={s.operation}>
                {
                    type === 'register' ? <div className={s.agree}>
                        <Checkbox checked={checked} onChange={onChange} />
                        <label className="text-light">阅读并同意<a>《敲出真谛条约》</a></label>
                    </div> : null
                }
                <Button onClick={onsubmit} block theme="primary" disabled={type === 'register' ? !checked : false}>{type === 'login' ? '登录' : '注册'}</Button>
            </div>
        </div>
    )
}
export default Login;